<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui 调试预览</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs" lay-event="modify">编辑</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs" lay-event="modify">编辑</a>
    <a class="layui-btn layui-btn-radius layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<div style="display: none" id="detailDemo">
    <div class="layui-form-item">
        <label class="layui-form-label">文章名</label>
        <label class="layui-form-label" id="title" style="width: auto">文章名</label>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <label class="layui-form-label" id="created" style="width: auto">创建时间</label>
    </div>
</div>
<div style="display: none" id="modifyDemo">
    <form class="layui-form" action="">
        <input type="hidden" id="title_ID" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">文章名</label>
            <div class="layui-input-block">
                <input type="text" id="title_modify" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <input type="text" name="categories" id="categories_modify" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="text" name="created" id="created_modify" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required" id="city_modify">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="modifyForm">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<blockquote class="layui-elem-quote layui-hide layui-text" id="footer">当前版本：layui v{{ layui.v }}</blockquote>


<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.config({
        version: '1619028572570' //为了更新 js 缓存，可忽略
    });

    //加载模块
    layui.use(function() { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件
        var layer = layui.layer //弹层
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , dropdown = layui.dropdown //下拉菜单
            , $ = layui.jquery
        var index;

        //向世界问个好
        layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#created_modify' //指定元素
        });

        //Demo
        layui.use('form', function(){
            var form = layui.form;

            //监听提交
            form.on('submit(modifyForm)', function(data){
                // console.log(JSON.stringify(data.field))
                var created = data.field.created;
                created = new Date(created);
                // console.log(created);
                data.field.created = created;
                // console.log(JSON.stringify(data.field))
                $.ajax({
                    url:"/updateArticle",
                    data:data.field,
                    type:"post",
                    success:function (d) {
                        console.log(d.data)
                        if (d.data>0)
                        {
                            layer.close(index);
                        }
                        table.reload('demo');
                    }
                })
                // layer.msg(JSON.stringify(data.field));
                return false;
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , url: '/getList' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , limit: 5
            , limits: [5,10,15,20]
            , title: "文章列表"
            , toolbar: "default"
            , cols:
                [
                [ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true, fixed: 'left', totalRow: true}
                , {field: 'title', title: '文章名', sort: true}
                , {field: 'created', title: '创建时间', templet: "<div>{{layui.util.toDateString(d.created, 'yyyy-MM-dd HH:mm:ss')}}</div>", sort: true}
                , {field: 'categories', title: '分类', sort: true}
                , {field: 'tags', title: '标签', sort: true}
                , {fixed: 'right', title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]
                ]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        console.log(JSON.stringify(checkStatus.data[0].id));
                        // layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                        console.log(JSON.stringify(checkStatus.data[0].id))
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                //Ajax获取
                $.post('/getArticleByid/' + data.id, {}, function(str){
                    layer.open({
                        type: 1,
                        title: "文章详情",
                        content: $('#detailDemo')
                        //"文章名" + str.data.title + " " + "创建时间" + str.data.created
                    });
                    $("#title").text(str.data.title)
                    $("#created").text(str.data.created)
                });
            } else if(layEvent === 'modify'){
                //Ajax获取
                $.post('/getArticleByid/' + data.id, {}, function(d){
                    index = layer.open({
                        type: 1,
                        title: "文章修改",
                        content: $('#modifyDemo')
                        //"文章名" + str.data.title + " " + "创建时间" + str.data.created
                    });
                    $("#title_ID").val(d.data.id)
                    $("#title_modify").val(d.data.title)
                    $("#categories_modify").val(d.data.categories)
                    var created = layui.util.toDateString(d.data.created,'yyyy-MM-dd');
                    $("#created_modify").val(created)
                    $('#city_modify').val(d.data.city)
                    form.render('select'); //更新全部
                });
                // //下拉菜单
                // dropdown.render({
                //     elem: this //触发事件的 DOM 对象
                //     ,show: true //外部事件触发即显示
                //     ,data: [{
                //         title: '编辑'
                //         ,id: 'edit'
                //     },{
                //         title: '删除'
                //         ,id: 'del'
                //     }]
                //     ,click: function(menudata){
                //         if(menudata.id === 'del'){
                //             layer.confirm('真的删除行么', function(index){
                //                 obj.del(); //删除对应行（tr）的DOM结构
                //                 layer.close(index);
                //                 //向服务端发送删除指令
                //             });
                //         } else if(menudata.id === 'edit'){
                //             layer.msg('编辑操作，当前行 ID:'+ data.id);
                //         }
                //     }
                //     ,style: 'margin-left: -50px; box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                // })
            }
        });

        function detail(data) {
            layer.msg("查看操作" + data.id);
            $.ajax({
                url: "/getDetailbyId/" + data.id,
                type: "get",
                dataType: "json",
                success: function (d) {
                    console.log(d.data);
                    layer.open({
                        type: 1,
                        skin: "layui-layer-rim",
                        area: ['420px','240px'],
                        content: d.data.title
                    });
                }
            })
        }
    })
</script>
</body>
</html>